import React, { useState,useEffect } from 'react';
import Edit from '../CKEditor/Edit'
import {url} from '../../util/config'
import {Upload, Form, Input, Button, Select, InputNumber} from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import 'antd/dist/antd.css';
import API from "../../api/api";
import LayoutManage from "../Layout/LayoutManage";
import SelectLayoutArea from "../Layout/SelectLayoutArea";
import './index.css'
import {Editor} from "@tinymce/tinymce-react/lib/es2015/main/ts/components/Editor";

//#region
//执行逻辑：
//从父组件 ../ModulePage/ModuleManage获取defaultData,即要修改的行内record数据
//  1.从defaultData中获取key和type，调用API.getFileContent()获取相应类型数据
//  2.将获取的数据作为defaultValue传给Form表单
//  3.修改数据的话调用onFinish()来提交修改数据
//#endregion

let config = require('../../util/config').config

let token = localStorage.getItem("token")
const request = {
    action: url.file_upload_url,
    headers: {
        'Accept': "application/json",
        'Authorization': token
    },
    defaultFileList: []
}
//输入record.type的中文格式，自动转换成要发送的英文格式
function matchType(type){
    if(type===config.folder_d){
        type="folder-d"
    }else if(type==config.file_d){
        type="file-d"
    }else if(type==config.file){
        type = "file"
    }else if(type==config.article){
        type = "article"
    }else if(type==config.folder){
        type = "folder"
    }
    return type
}

//修改目录
export function ModuleUpdate(props){

    let hasFlashed = false

    let [status,setStatus] = useState('N');

    let [sortNum,setSortNum] = useState(null);

    const [form] = Form.useForm();

    const onReset = () => {
        // alert("reset")
        form.resetFields();
        setSortNum(props.defaultData.sortNum)
        setStatus('N')

    };

    const onFinish = (values) => {
        if(values.sortNum==""){
            values.sortNum="-1"
        }
        values.layoutType=JSON.parse(localStorage.getItem("layoutType"))
        values.params=JSON.parse(localStorage.getItem("params"))
        values.moduleId = props.defaultData.key
        values.moduleParentId = props.defaultData.parentId
        if(props.defaultData.type==config.folder_d){
            values.moduleType="folder-d"
        }else {
            values.layoutArea=JSON.parse(localStorage.getItem("layoutArea"))

            if(props.defaultData.type==config.file_d){
                values.moduleType="file-d"
            }else if(props.defaultData.type==config.article_d){
                values.moduleType="article-d"
            }else if(props.defaultData.type==config.page){
                values.moduleType="page"
            }
        }
        if(values.sortNum===null){
            values.sortNum=-1
        }
        if(API.updateModule(values)=="ok"){
            if(!hasFlashed){
                //只有返回成功后，才会置父组件的状态值为true，即Modal关闭后实现列表刷新
                props.result(true)
                //执行上一步后，再本组件也加一个标记，来标识已经重置了父组件的刷新状态值status
                hasFlashed = true;
            }
        }
    };

    console.log("Component Modal updateModalContent props",props)

    function onChange(value) {
        let tmpStatus = API.sortNum({
            id:props.defaultData.parentId,
            sortNum:value
        })
        if(tmpStatus=='Y'){
            setStatus('Y')
            setSortNum(value);
        }else {
            setStatus('N')
        }
        console.log('changed', value);
    }

    let layoutParams = null;

    let params = []

    function getLayoutParams() {
        console.log("component modulePage modulemanage",props.layoutParams)
        if(props.defaultData.type==config.folder_d){
            layoutParams = API.getLayout("folder-d",props.defaultData.key)
            params[0]="folder"
        }else {
            layoutParams={
                LAYOUT_TYPE:props.layoutParams.LAYOUT_TYPE
            }
            if(props.defaultData.type==config.file_d){
                params[0]="file"
            }else if(props.defaultData.type==config.article_d){
                params[0]="article"
            }else if(props.defaultData.type==config.page){
                params[0]="page"
            }
        }
        params[1]=props.defaultData.key
    }

    getLayoutParams();

    function setLayoutArea(){
        if(props.defaultData.type==config.file_d || props.defaultData.type==config.article_d){
            localStorage.setItem("layoutArea",JSON.stringify(props.defaultData.layoutArea))
        }
    }

    setLayoutArea()

    return (
        <Form
            preserve={false}
            form={form}
            onFinish={onFinish}
            onReset={onReset}
            labelCol={{
                span: 4,
            }}
            wrapperCol={{
                span: 17,
            }}
            layout="horizontal"
            initialValues={{
                ['sortNum']: props.defaultData.sortNum
            }}
        >
            <Form.Item label={params[0]=="folder" ? `${config.folder_d}名称` : params[0]=="file" ? `${config.file_d}名称` : params[0]=="article" ? `${config.article_d}名称`: params[0]=="page"? `名称` : null }
                       name="moduleName"
                       rules={[({ getFieldValue }) => ({
                           validator(_, value) {
                               if(value==props.defaultData.name){
                                   return Promise.resolve();
                               } else {
                                   const values = {
                                       parentType:props.defaultData.parentType,
                                       parentId:props.defaultData.parentId,
                                       type:props.defaultData.type==config.folder_d ? 'folder-d' : (props.defaultData.type==config.file_d?'file-d':(props.defaultData.type==config.article_d?'article-d':(props.defaultData.type==config.page? "page":null))),
                                       value:value
                                   }
                                   if(value!=undefined && value!=""){
                                       const status = API.judgeModule(values)
                                       if(status=="Y"){
                                           return Promise.reject(new Error('命名冲突!'));
                                       }else if(status=="网络异常"){
                                           return Promise.reject(new Error('网络异常!'));
                                       }else if(status=='N'){
                                           return Promise.resolve();
                                       }
                                   }else if(value==""){
                                       return Promise.reject(new Error('内容不可为空!'));
                                   }else if(value==undefined){
                                       return Promise.resolve();
                                   }
                               }
                           },
                       })
                       ]}
            >
                <Input defaultValue={props.defaultData.name}/>
            </Form.Item >
            <Form.Item label="排序" name="sortNum"  validateStatus={status=='Y'? "warning":null} help={status=='Y'?`序号冲突，提交会将该笔数据序号置为${sortNum}` : null }>
                <InputNumber min={1} onChange={onChange}/>
            </Form.Item>
            {
                props.defaultData.type==config.folder_d
                    ?
                    <>
                        <LayoutManage  layoutParams={layoutParams} showCommit={false} storeParams={true} data={params}></LayoutManage>
                        {/*<LayoutManage layoutParams={props.layoutParams} type="folder-d" storeParams={true} data={props.data}></LayoutManage>*/}
                    </>
                    :
                    null
            }
            {
                props.defaultData.type==config.file_d || props.defaultData.type==config.article_d || props.defaultData.type==config.page
                    ?
                    <Form.Item label="选择区域" name="layoutArea">
                        <SelectLayoutArea visible={true} type="update" layoutParams={layoutParams} layoutArea={props.defaultData.layoutArea}></SelectLayoutArea>
                    </Form.Item>
                    :
                    null
            }
            {
                props.defaultData.type==config.page
                    ?
                    <Form.Item className="pageEditorBorder" label="编辑" name="content" >
                        <Edit  data={props.pageInfo[0].MODULE_CONTENT}></Edit>
                    </Form.Item>
                    :
                    null
            }
            {/*<Form.Item label="目录备注" name="moduleDesc">*/}
            {/*    <Input />*/}
            {/*</Form.Item>*/}
            <Form.Item
                label="提交添加"
                name="commit"
            >
                <Button type="primary" htmlType="submit">
                    提交
                </Button>
                <Button htmlType="reset" style={{marginLeft:"1rem"}}>
                    重置
                </Button>
            </Form.Item>
        </Form>
    );
};

//修改文件
export function FileUpdate(props){
    //提交修改后，标记置为true，表示已经把刷新的信息:true 传给了父组件status变量，
    let hasFlashed = false
    //将form表单引入该对象
    const [form] = Form.useForm();
    //编辑器内容
    let newData = null;
    //获取的文章内容
    let data = null
    //获取的文件/附件的数组
    let [previewUrls,setPreviewUrls] = useState([]);
    let [showUploadButton,setShowUploadButton] = useState(false)
    //如果在修改状态下新增或者删除了文件url，则fileList会获取新内容
    let fileList = null;

    // 1.从defaultData中获取key和type，调用API.getFileContent()获取相应类型数据
    // 从父组件列表中获取的对应的行内数据（key,type,name）
    let node = props.defaultData;
    // 如果type为文章
    if(node.type==config.article){
        // let item =API.getPreviewEditData();
        let item = API.getFileContent(node.key,node.type);
        data = item.articleContent;
        console.log("Component ModulePage ModuleManage getFileContent",item,data)
        previewUrls = item.urls;
    }else if(node.type==config.file){
        // 如果type为文件
        previewUrls = API.getFileContent(node.key,node.type);
        // previewUrls=API.getPreviewUrls();
    }

    function onReset(){
        // alert("reset")
        form.resetFields();
        setShowUploadButton(false)
    };

    function onFinish(values){
        debugger
        if(newData!=null && newData != undefined && newData!="<p></p>"){
            values.content = newData
        }
        if(values.new==null || values.new==""){
            values.new = config.notify_date
        }
        console.log(values)
        //key值：articleId/fileId/folderId
        values.key = node.key
        //type值：config.article/config.file/config.folder
        values.type = node.type

        //如果修改的文件类型不是folder的话，就是file和article，二者都有附件参数
        if(values.type!=config.folder){
            //文件和文章都要有文件和附件，只是名称不同，但是功能一样，因此在这里共用
            //文章和文件都有
            values.attachUrls = undefined
            //文章和文件都有
            values.attachNames = undefined
            values.attachNum = undefined
            if(values.attach!==undefined){
                let tmpList = values.attach.fileList;

                values.attachUrls = []
                values.attachNames = []
                for(let i=0;i<tmpList.length;i++){
                    values.attachUrls.push(tmpList[i].response.result[0].FILE_URL)
                    values.attachNames.push(tmpList[i].response.result[0].FILE_URL_NAME)
                }
            }
            // 如果是文章的话，
            // 1 还要把附件的附件量加上,
            // 2 文章的编辑内容也要判断是不是空或者是不是和初始的文章的内容相同
            if(values.type==config.article){
                // 把附件量加上
                console.log(values.attach)
                if(values.attach!=undefined  ){
                    if(values.attach.fileList.length > 0){
                        values.attachNum = values.attachUrls.length;
                    }
                    if(values.attach.fileList.length == 0){
                        values.attachNum = 0
                    }
                }
                // 文章的编辑内容
                if(values.content == '<p></p>' ){
                    console.log("内容不可为空")
                    return;
                }
                if(values.content == data){
                    console.log("内容未做修改")
                    values.content = undefined
                }
            }
        }

        if(API.updateFile(values)=="ok"){
            if(!hasFlashed){
                //只有返回成功后，才会置父组件的状态值为true，即Modal关闭后实现列表刷新
                props.result(true)
                //执行上一步后，再本组件也加一个标记，来标识已经重置了父组件的刷新状态值status
                hasFlashed = true;
            }
        }
    };

    function getContent(content) {
        newData = content;
    }

    return (
        <Form
            preserve={false}
            form={form}
            onFinish={onFinish}
            onReset={onReset}
            labelCol={{
                span: 4,
            }}
            wrapperCol={{
                span: 17,
            }}
            layout="horizontal"
            initialValues={{
                ['new']: node.new
            }}
        >
            {
                props.defaultData.type==config.article || props.defaultData.type==config.folder
                    ?
                    <Form.Item
                        name="name"
                        label="标题"
                        rules={[({ getFieldValue }) => ({
                                validator(_, value) {
                                    if(value==props.defaultData.name){
                                        return Promise.resolve();
                                    } else{
                                        const values = {
                                            parentType:props.defaultData.parentType,
                                            parentId:props.defaultData.parentId,
                                            type:props.defaultData.type==config.article ? 'article' : (props.defaultData.type==config.folder?'folder':null),
                                            value:value
                                        }
                                        if(value!=undefined && value!=""){
                                            const status = API.judgeFolderAndArticle(values)
                                            if(status=="Y"){
                                                return Promise.reject(new Error('命名冲突!'));
                                            }else if(status=="网络异常"){
                                                return Promise.reject(new Error('网络异常!'));
                                            }else if(status=='N'){
                                                return Promise.resolve();
                                            }
                                        }else if(value==""){
                                            return Promise.reject(new Error('内容不可为空!'));
                                        }else if(value==undefined){
                                            return Promise.resolve();
                                        }
                                    }
                                },
                            })
                        ]}
                    >
                        <Input defaultValue={node.name}/>
                    </Form.Item>
                    :
                    null
            }
            <Form.Item label="提醒時間【天數】" name="new">
                <InputNumber min={1} placeholder={`默認${config.notify_date}天`}/>
            </Form.Item>
            <Form.Item
                label="是否置顶"
                name="status">
                <Select defaultValue={node.status}>
                    <Select.Option value="Y">是</Select.Option>
                    <Select.Option value="N">否</Select.Option>
                </Select>
            </Form.Item>
            {
                props.defaultData.type==config.article ?
                    <>
                        <Form.Item
                            name="content"
                            label="文章编辑"
                            valuePropName="fileList"
                        >
                            {/*<Button onClick={_=>alert(newData)}>获取文件内容</Button>*/}
                            <Edit data={data} onChange={getContent}></Edit>
                        </Form.Item>
                        <Form.Item label="附件上传" name={"attach"} >
                            <Upload name="file" {...request} listType="picture" defaultFileList={[...previewUrls]}>
                                <Button icon={<UploadOutlined />}>上传</Button>
                            </Upload>
                        </Form.Item>
                    </>
                    :
                    null
            }
            <Form.Item
                label="提交添加"
                name="commit"
            >
                <Button type="primary" htmlType="submit">
                    提交
                </Button>
                <Button htmlType="reset" style={{marginLeft:"1rem"}}>
                    重置
                </Button>
            </Form.Item>
        </Form>
    );
};
